<template>
  <div>
    <van-nav-bar title="我的收货地址">
      <template #left>
        <van-icon
          name="arrow-left"
          size="25"
          color="black"
          @click="$router.back()"
        />
      </template>
      <template #right>
        <van-icon name="ellipsis" size="25" color="black" />
      </template>
    </van-nav-bar>

    <van-address-list
      v-model="chosenAddressId"
      :list="list"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
      @select="Switch"
    />

    <van-dialog
      v-model="show"
      title="编辑地址"
      show-cancel-button
      @confirm="replace"
    >
      <van-address-edit
        :area-list="areaList"
        show-postal
        show-delete
        show-set-default
        show-search-result
        :address-info="obj"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
      />
    </van-dialog>
  </div>
</template>

<script>
import Vue from "vue";

import { AddressList, Toast, Cell, Dialog } from "vant";
import { addressList, updateAddress, removeAddress } from "../api/me";
import { areaList } from "@vant/area-data";
Vue.use(Cell);
Vue.use(Toast);
Vue.use(Dialog);
Vue.use(AddressList);
Vue.use(Toast);

export default {
  data() {
    return {
      show: false,
      chosenAddressId: "",
      areaList: areaList,

      list: [],
      addressid: "",
      name: "",
      tel: "",
      addressDetail: "",
      isDefault: "",
      obj: "",
    };
  },
  methods: {
    onAdd() {
      this.$router.push("/addAddress");
      Toast("新增地址");
    },
    onEdit(item) {
      // console.log(item);
      this.addressid = item.id; //点击编辑把点击的这一项的id设置给这个
      (this.name = item.name),
        (this.tel = item.tel),
        (this.addressDetail = item.address),
        (this.isDefault = item.isDefault);
      // console.log(this.addressid);
      this.show = true;
      Toast("编辑地址");
      //这个obj是点编辑的时候进显示有默认这条地址的信息
      this.obj = {
        id: this.addressid,
        name: this.name,
        tel: this.tel,
        addressDetail: this.addressDetail,
        isDefault: this.isDefault,
      };
    },
    Switch(item) {
      localStorage.setItem("address", JSON.stringify([item]));
    },
    replace() {
      this.$router.go(0);
    },
    //点击保存修改地址
    onSave(content) {
      // console.log(content);
      updateAddress({
        addressid: this.addressid,
        userid: localStorage.getItem("id"),
        name: content.name,
        tel: content.tel,
        province: content.province,
        city: content.city,
        county: content.country,
        addressDetail: content.addressDetail,
        isDefault: content.isDefault,
      }).then((res) => {
        console.log(res);
      });
    },
    //点击删除删除地址
    onDelete() {
      removeAddress({
        addressid: this.addressid,
      }).then((res) => {
        console.log(res);
      });
    },
  },
  created() {
    //获取地址列表
    addressList({ userid: localStorage.getItem("id") }).then((res) => {
      // console.log(res.data.data);
      res.data.data.forEach((item) => {
        this.list.push({
          id: item.addressid,
          name: item.name,
          tel: item.tel,
          address: item.province
            .concat(item.city)
            .concat(item.county)
            .concat(item.addressDetail),
          isDefault: item.isDefault,
        });
        if (item.isDefault) {
          this.chosenAddressId = item.addressid;
        }
      });
    });
  },
};
</script>

<style >
.aboutmy {
  padding: 0.2rem 0;
}
.address {
  padding: 0.1rem;
}
.address input {
  width: 3rem;
  height: 0.4rem;
}
</style>